<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>借款审批</span>
      </div>
      <div class="loanApprove-box">
        <!-- 日期选择器的容器 -->
        <div class="date-box">
          <span>日期选择</span>
          <el-date-picker
            style="margin-left: 20px"
            v-model="dateRange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @change="OnDateChange"
          >
          </el-date-picker>
          <el-button type="success" style="margin-left: 15px" @click="onSearch"
            >查询</el-button
          >
        </div>
      </div>
      <div class="loanApplyList-box">
        <el-tabs
          type="border-card"
          style="margin-top: 15px"
          @tab-click="onTabsClick"
        >
          <el-tab-pane
            v-for="(item, index) in tabsList"
            :key="index"
            :label="item"
          >
            <el-table
              :data="tableData"
              stripe
              style="width: 100%"
              :header-cell-style="{ background: '#e1e4e5' }"
            >
              <el-table-column prop="loanApplyId" label="借款编号" width="100">
              </el-table-column>
              <el-table-column prop="name" label="借款人" width="150">
              </el-table-column>
              <el-table-column prop="applyTime" label="申请时间" width="150">
              </el-table-column>
              <el-table-column prop="amount" label="借款金额">
              </el-table-column>
              <el-table-column prop="duration" label="借款期限（月）">
              </el-table-column>
              <el-table-column prop="loanRate" label="借款利率">
              </el-table-column>
              <el-table-column prop="repayDay" label="还款日">
              </el-table-column>
              <el-table-column
                prop="status"
                label="状态"
                :formatter="stateFormat"
              >
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-popconfirm
                    title="是否通过？"
                    icon="el-icon-info"
                    icon-color="red"
                    confirm-button-text="通过"
                    cancel-button-text="驳回"
                    confirm-button-type="success"
                    cancel-button-type="danger"
                    @onConfirm="agree(scope.row.loanApplyId)"
                    @onCancel="vrto(scope.row.loanApplyId)"
                  >
                    <el-button slot="reference" size="mini" type="primary" :disabled="scope.row.status">审批</el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              style="margin-top: 10px"
              background
              @current-change="onPageChange"
              layout="prev, pager, next"
              :page-count="filterData.totalPages"
              :current-page="filterData.curPage"
              :page-size="filterData.perPage"
            >
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      // 分页数据
      filterData: {
        // 开始的日期
        start: "",
        // 结束时间
        end: "",
        // 总页数
        totalPages: 1,
        // 当前页
        curPage: 1,
        // 每页显示几条数据
        perPage: 3,
        // 审批状态
        approve_status: 0,
      },
      tabsList: ["未审批", "已审批"],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      // 日期的数据
      dateRange: "",
      // 未审批的数据
      tableData: [
        {
          
        },
      ],
    };
  },
  methods: {
    ...mapActions({
      getLoanApplyList: "loan/getLoanApplyList",
      updateloanApplystate: "loan/updateloanApplystate",
    }),
    getLoanList() {
      // 请求成功的话就返回响应对象
      this.getLoanApplyList(this.filterData).then((res) => {
        this.tableData = res.content;
        this.filterData.totalPages = res.paginateInfo.pages;
      });
    },
    // 点击查询按钮
    onSearch() {
      this.filterData.curPage = 1;
      this.getLoanList();
    },
    // 通过审批
    agree(id){
      this.updateLoanApply(id,1)
    },
    // 驳回
    vrto(id){
      this.updateLoanApply(id,2)
    },
    updateLoanApply(id,status){
      var loanApply = {applyId : id, status: status}
      this.updateloanApplystate(loanApply).then(res =>{
        if(status === 1){
          this.message.success('成功通过审批')
          this.getLoanList()
        }else if(status === 2){
          this.$message.error('已驳回审批');
          this.getLoanList()
        }
      })
    },
    // 格式化已读状态
    stateFormat(row) {
      // console.log(row);
      if (row.status == 0) {
        return "未审批";
      } else if (row.status == 1) {
        return "通过";
      } else if (row.status == 2) {
        return "驳回";
      }
    },
    // 当前页数发生变化时的回调
    onPageChange(index) {
      this.filterData.curPage = index;
      this.getLoanList();
    },
    // 当日期选择器选择内容发送变化时
    OnDateChange(data) {
      if (data) {
        console.log("日期选择发生变化时", data);
        this.filterData.start = data[0];
        this.filterData.end = data[1];
      } else {
        this.filterData.start = "";
        this.filterData.end = "";
      }
    },
    // tabl被选中时触发
    onTabsClick(data) {
      console.log("当table被点击时", data);
      this.filterData.approve_status = data.index;
      this.filterData.curPage = 1
      this.getLoanList();
    },
  },
  // 页面创建好的时候调用他
  created() {
    this.getLoanList();
  },
};
</script>
<style lang="scss" scoped>
</style>
